<div id="featured-products">
    <div id="fp-navigations"></div>
    <ul id="fp-slider" class="jcarousel-skin-tango">
        <?php
        try{
        if(count($this->featuredProducts)){
            foreach($this->featuredProducts as $product){
        ?>
        <li>
            <a href="<?php echo $this->url($product->getProperties(), 'product_product_details')?>">
                <img src="<?php echo $product->image_thumbnail?>" alt="<?php echo $product->name?>"/>
                <span class="fp-product-price"><?php echo number_format($product->price, 0, '.', ',')?> VND</span>
            </a> 
            <div class="fp-product-shadow"></div>   
        </li>
        <?php 
               }
        }
        }catch(Exception $ex){echo $ex->getMessage();}
        ?>
        
    </ul>
</div>
<?php 
if(count($this->featuredProducts)){
?>
<script type="text/javascript">
    $(document).ready(function(){
                        
        var i = 1;
        var step = 6;
        var size = $('#fp-slider li').length;
                        
        if(step >=  size){
            $('#fp-navigations').append('<a href="#" class="dot dot-' + (1) + '" rel="' + (1) + '"></a>');
            $('#fp-navigations').append('<a href="#" class="dot dot-' + (size) + '" rel="' + (size) + '"></a>');
        }else{
            $('#fp-slider li').each(function(){
                if((($(this).index()) % step == 0)){
                                    
                    $('#fp-navigations').append('<a href="#" class="dot dot-' + ($(this).index() + 1) + '" rel="' + ($(this).index() + 1) + '">' + (i++) + '</a>');
                    if($(this).index() + 7 > size) return false; //index + 1 để lấy độ dài + 1 nữa là  + thêm visible = 1 đối với accordion
                    
                    if($(this).index() + 7 <= size && $(this).index() + 1 + step > size){
                        $('#fp-navigations').append('<a href="#" class="dot dot-' + (size) + '" rel="' + (size) + '">' + (i) + '</a>');
                    }
                }                                                          
            });
        } 
        $('#fp-navigations a').eq(0).addClass('current');
        $('#fp-navigations').append('<div style="clear: both;"></div>');
        $('#fp-slider').jcarousel({
            initCallback: function(carousel, state){
                //hook navigation
                $('#fp-navigations a').bind('click', function() {
                    if($(this).hasClass('current')) return false;
                    $(this).parent().find('.current').removeClass('current');
                    $(this).addClass('current');
                    carousel.scroll($.jcarousel.intval($(this).attr('rel')));
                    return false;
                });
            },
            itemLoadCallback: {
                onAfterAnimation: function(carousel, state){
                    var size = carousel.options.size;
                    var index = carousel.first;
                    $('#fp-navigations a').removeClass('current');
                    if($('#fp-navigations a.dot-' + index).length == 0){
                        var last = carousel.last; //alert(last);
                        while (last > size){
                            last -=size;
                        }
                        if( last == size){
                            $('#fp-navigations a').last().addClass('current');
                        }else{
                            var lastNavigation;
                            do {
                                last--;
                                lastNavigation = $('#fp-navigations a.dot-' + last);
                                if(last <=0) break;
                            } while(lastNavigation.length == 0);
                                    
                            lastNavigation.addClass('current');
                        }
                    }else{
                                        
                        $('#fp-navigations a.dot-' + index).addClass('current');
                    }
                }
            },
            auto: 3,
            animation: 1000,
            buttonNextHTML: null,
            buttonPrevHTML: null,
            visible:6,
            scroll : 6,                        
            wrap : 'both'
        });
    });
                    
                    
                    
</script>
<?php }?>